hot.data is a persistent object available on import.meta.hot that allows modules to pass state from the old version to the new version during HMR updates, preserving data across module replacements
hot.data is a property of Vite's import.meta.hot object that serves as persistent storage across Hot Module Replacement (HMR) updates. When a module is hot-replaced, the old version's hot.data object is automatically passed to the new version's hot.data, allowing modules to preserve state and avoid resetting critical information during development. This is essential for maintaining application state, ongoing connections, or expensive computations across code edits .
When a module is marked for HMR, Vite's runtime creates a persistent object associated with that module. This object is stored in a map keyed by module ID. During the update lifecycle, when the old module version is disposed, Vite extracts its hot.data object and stores it temporarily. When the new module version loads and its hot.data is accessed, Vite returns the preserved object from the old version. This ensures seamless data transfer between module versions without requiring manual serialization or external storage .
The primary use case is preserving expensive state that would be costly to recreate on every edit. This includes WebSocket connections, timers, accumulated data, user session state, and component instance references. Without hot.data, every code edit would reset these resources, forcing developers to re-establish connections or re-enter data. Libraries and framework plugins use hot.data internally to maintain component instances and render caches across updates .
hot.data works in concert with hot.dispose() and hot.accept(). The typical pattern is: in dispose(), you save any state you want to preserve into hot.data. When the new module loads, you retrieve that state from hot.data. If you only use hot.data without dispose(), the data won't be saved across updates. If you use dispose() without hot.data, you can clean up resources but won't preserve anything. Together, they enable complete state lifecycle management .
Data persistence scope:
hot.datais per-module, not global. Each module has its own persistent object .No serialization needed: The object is transferred by reference, so complex objects like functions and class instances remain usable .
Not for production:
import.meta.hotand all related APIs are stripped from production builds .Module eviction: If a module is removed from the dependency graph, its
hot.datais garbage collected .
Framework plugins like @vitejs/plugin-react and @vitejs/plugin-vue use hot.data internally to preserve component state and context across HMR updates. For example, React Fast Refresh maintains a mapping of component instances to their latest definitions using hot.data, ensuring that when a component file changes, existing instances can be updated with new render functions while preserving local state .